<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true">
				<el-form-item label="型号名称：">
					<el-input v-model="viewForm.type"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSerch" icon="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleReset" icon="circle-close">重置</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd" icon="plus">录入</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="rows" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;" id="id" border height="444">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="name" label="型号" width="180" sortable>
			</el-table-column>
			<el-table-column prop="catName" label="分类" min-width="200" sortable>
			</el-table-column>
			<el-table-column prop="brandName" label="品牌" min-width="200" sortable>
			</el-table-column>
			<el-table-column prop="modelDesc" label="描述" width="180" sortable>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="200">
				<template scope="scope">
					<el-button size="small" @click="showUploadDialog(scope.row.id)">上传图片</el-button>
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<!-- <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
      </el-pagination> -->
			<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="totals" style="float:right;">
			</el-pagination>
		</el-col>
		<el-dialog title="上传图片" v-model="showUpload" :close-on-click-modal="false">
			<el-upload class="upload-demo" 
			:action="this.baseJs.getSrcUrl('api/attachMentController/uploadAttachMent.do')" :data="uploadForm" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList2" list-type="picture" multiple>
				<el-button size="small" type="primary">点击上传</el-button>
				<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
			</el-upload>
		</el-dialog>
		<el-dialog title="插入图片" v-model="showUpload_add" :on-success="uploadSuccess" :close-on-click-modal="false">
			<el-upload drag multiple :on-success="uploadSuccess" :data="uploadForm" class="upload-demo" ref="upload" 
				:action="this.baseJs.getSrcUrl('api/attachMentController/uploadAttachMent.do')"
			 :on-preview="handlePreview" :on-remove="handleRemove" :auto-upload="true">
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<!--<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
				<!--<el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
				<!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
			</el-upload>
		</el-dialog>
		<!--录入界面-->
		<el-dialog title="录入" size="large" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addrules" ref="addForm">
				<el-form-item label="型号" prop="name" :label-width="formLabelWidth">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="品牌" prop="brandId" :label-width="formLabelWidth">
					<el-select v-model="addForm.brand" filterable placeholder="请选择">
						<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id+';'+item.name">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="分类" prop="catId" :label-width="formLabelWidth">
					<el-select v-model="addForm.type" filterable placeholder="请选择">
						<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id+';'+item.name">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="规格" prop="modelPara" :label-width="formLabelWidth">
					<el-input @click.native="showSelect(1)" v-model="selectPropertyName" :disabled="true" ></el-input>
				</el-form-item>
				<el-form-item label="属性" prop="modelAttr" :label-width="formLabelWidth">
					<el-input @click.native="showSelect(2)" v-model="selectSpecName" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="标签" prop="modelTag" :label-width="formLabelWidth">
					<el-tag :key="tag" v-for="tag in dynamicTags" :closable="true" :close-transition="false" @close="handleClose(tag)">
						{{tag}}
					</el-tag>
					<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="mini" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
					</el-input>
					<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
				</el-form-item>
				<el-form-item label="描述" prop="modelDesc" :label-width="formLabelWidth">
					<el-input v-model="addForm.modelDesc" type="textarea" :rows="6" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="详细介绍" prop="modelInfo" :label-width="formLabelWidth">
					<!--<el-input v-model="addForm.modelInfo" auto-complete="off"></el-input>-->
					<quill-editor v-model="addForm.modelInfo" ref="myTextEditor">
					</quill-editor>
				</el-form-item>
				<!--<el-form-item label="排序" prop="sort" :label-width="formLabelWidth">
					<el-input v-model="addForm.sort" auto-complete="off"></el-input>
				</el-form-item>-->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--编辑界面-->
		<el-dialog title="编辑" size="large" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editrules" ref="editForm">
				<el-form-item label="型号" prop="name" :label-width="formLabelWidth">
					<el-input v-model="editForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="品牌" prop="brandId" :label-width="formLabelWidth">
					<el-select v-model="editForm.brand" filterable placeholder="请选择">
						<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id+';'+item.name">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="分类" prop="catId" :label-width="formLabelWidth">
					<el-select v-model="editForm.type" filterable placeholder="请选择">
						<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id+';'+item.name">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="规格" prop="modelPara" :label-width="formLabelWidth">
					<el-input @click.native="showSelect(1)" v-model="selectPropertyName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="属性" prop="modelAttr" :label-width="formLabelWidth">
					<el-input @click.native="showSelect(2)" v-model="selectSpecName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="标签" prop="modelTag" :label-width="formLabelWidth">
					<el-tag :key="tag" v-for="tag in dynamicTags" :closable="true" :close-transition="false" @close="handleClose(tag)">
						{{tag}}
					</el-tag>
					<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="mini" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
					</el-input>
					<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
				</el-form-item>
				<el-form-item label="描述" prop="modelDesc" :label-width="formLabelWidth">
					<el-input v-model="editForm.modelDesc" type="textarea" :rows="6" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="详细介绍" prop="modelInfo" :label-width="formLabelWidth">
					<!--<el-input v-model="addForm.modelInfo" auto-complete="off"></el-input>-->
					<quill-editor v-model="editForm.modelInfo" ref="myTextEditor2">

					</quill-editor>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<el-dialog title="选择" size="large" v-model="showProperty" :close-on-click-modal="false">
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true">
				<el-form-item label="名称：">
					<el-input v-model="viewForm.type"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSerch" icon="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleReset" icon="circle-close">重置</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="doSelect" icon="plus">确定</el-button>
				</el-form-item>
			</el-form>
		</el-col>
			
			<el-table :data="propertyRow" highlight-current-row v-loading="propertyPage.listLoading" @selection-change="propertySelsChange" style="width: 100%;" id="id" border height="444">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column type="index" width="60">
				</el-table-column>
				<el-table-column prop="name" label="名称" sortable>
				</el-table-column>
				<el-table-column prop="value" label="内容" sortable>
				</el-table-column>
			</el-table>

			<!--工具条-->
			<el-col :span="24" class="toolbar">
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="propertyPage.currentPage" :page-sizes="[10, 20, 30]" :page-size="propertyPage.size" layout="total, sizes, prev, pager, next, jumper" :total="propertyPage.totals" style="float:right;">
				</el-pagination>
			</el-col>
		</el-dialog>

	</section>
</template>
<script>
	var server_url = "http://120.77.207.47:8080";
	import { list, save, update, del, brandList, goodsTypeList, paralist } from '../../api/model';
	import { getUploadList, delAttachMent } from '../../api/upload';
	import VueQuillEditor from 'vue-quill-editor'
	export default {
		data() {
			return {
				selectType:1,
				propertyRow: [],
				selectProperty:"",
				selectSpec:"",
				selectPropertyName:"",
				selectSpecName:"",
				pSel:"",
				propertyPage: {
					page: 1,
					// num:10,
					totals: 0,
					size: 10,
					currentPage: 1,
					listLoading: false,
				},
				showProperty: false,
				value5: [],
				modelPara: [],
				modelAttr: [],
				dynamicTags: [],
				inputVisible: false,
				inputValue: '',
				headers: {
					token: localStorage.getItem('token')
				},
				uploadForm: {
					id: "",
					type: "model"
				},
				textIndex: "",
				brandList: [],
				fileList2: [],
				typeList: [],
				showUpload: false,
				showUpload_add: false,
				isHot: '',
				sels: '',
				rows: [],
				// total: 0,
				listLoading: false,
				page: 1,
				// num:10,
				totals: 0,
				size: 10,
				currentPage: 1,
				isShow: false,
				addFormVisible: false, //录入界面是否显示
				addLoading: false,
				//录入界面数据
				addForm: {
					brand: "",
					type: "",
				},
				addrules: {
					carNumber: [{
						required: true,
						message: '请输入正确车牌号',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请输入车辆类型',
						trigger: 'blur'
					}],
				},
				editFormVisible: false, //编辑界面是否显示
				editLoading: false,
				//编辑界面数据
				editForm: {},
				editrules: {
					carnumber: [{
						required: true,
						message: '请输入正确车牌号',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请输入车辆类型',
						trigger: 'blur'
					}],
				},
				viewFormVisible: false, //查看界面是否显示
				viewLoading: false,
				//查看界面数据
				viewForm: {
					type: '',
					carNumber: '',
					departName: ''
				},
				formLabelWidth: "100px",
				nowType: "",
			};
		},
		components: {
			VueQuillEditor
		},
		methods: {
			showSelect(type){
				this.selectType = type;
				this.getPraList();
				this.showProperty = true;
			},
			doSelect(){
				debugger;
				if(this.selectType==1){
					this.selectProperty="";
					this.selectPropertyName="";
				}else{
					this.selectSpec="";
					this.selectSpecName="";
				}
				for(let i =0;i<this.pSel.length;i++){
					debugger;
					if(this.selectType==1){
						this.selectPropertyName+=this.pSel[i].name+"、";
						this.selectProperty+=this.pSel[i].id+';';
					}else{
						this.selectSpecName+=this.pSel[i].name+"、";
						this.selectSpec+=this.pSel[i].id+';';
					}
				}
				this.showProperty = false;
			},
			handleClose(tag) {
				this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			},

			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
			},

			handleInputConfirm() {
				let inputValue = this.inputValue;
				if(inputValue) {
					this.dynamicTags.push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = '';
			},
			uploadSuccess(res, file, fileList) {
				debugger;
				this.editor.insertEmbed(this.textIndex, 'image', "http://120.77.207.47:8080" + res.obj[0]);
				for(let i = 0; i < fileList.length; i++) {
					if(fileList[i].status == "uploading")
						return;
				}
				this.showUpload_add = false;
			},
			getUploadList(id) {
				let that = this;

				let params = {
					"id": id,
					type: "model"
				}

				getUploadList(params).then((res) => {
					// console.log(res);
					that.fileList2 = [];
					for(let i = 0; i < res.obj.length; i++) {
						let fileobj = res.obj[i];
						that.fileList2.push({
							name: fileobj.fileName,
							url: server_url + fileobj.realPath,
							id: fileobj.id,
						})
					}
					//					that.fileList2 = res.obj;
					// console.log(this.total);
					// this.listLoading = false;
				});
			},
			customButtonClick() {
				alert("!");
			},
			showUploadDialog(id) {
				this.getUploadList(id);
				this.uploadForm.id = id;
				this.showUpload = true;
			},
			handleRemove(file, fileList) {
				debugger;
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			//列表切换列表页
			handleCurrentChange(val) {
				this.currentPage = val;
				if(this.treeSelect.departId == null) {
					this.getList();
				} else {
					this.handleSerch();
				};

			},
			//列表切换显示条数
			handleSizeChange(val) {
				this.size = val;
				if(this.treeSelect.departId == null) {
					this.getList();
				} else {
					this.handleSerch();
				};
			},
			getSelectDepart(id) {
				this.treeSelect.departId = id;
			},
			//点击节点选中节点数据
			handleNodeClick(data, node) {
				this.treeSelect.departId = data.id;
				this.treeSelect.depart = data.name;
				this.isShow = !this.isShow;
			},
			//初始化
			// getTabData(){
			//   var params={departId:this.treeSelect.departId};
			//   getSubTypes(params).then(res => {
			//     this.subType=res.data;
			//     this.checkList=res.data;
			//   });
			// },
			//查询
			handleSerch: function() {
				// var paras = this.treeSelect.departId;
				// alert(paras);
				let para = {
					page: this.currentPage,
					rows: this.size,
					field: "carNumber,createBy,departName,type,id",
					departId: this.treeSelect.departId
					// departId: this.departnum,
					// row:this.row,
					//          name: this.item.value
				};
				console.log(para);
				// this.listLoading = true;
				getListList(para).then((res) => {
					// console.log(res);         
					this.rows = res.obj;
					this.totals = Number(res.total);
					// console.log(this.total);
					// this.listLoading = false;
				});

			},
			// 重置
			handleReset: function() {
				this.treeSelect.depart = null;
				this.treeSelect.departId = null;
				this.getList();
			},
			// 模板下载
			// handleDload:function () {
			//    updateCars().then(()=>{
			//       alert("下载成功")
			//   });
			//   updateCars();
			// },
			selsChange: function(sels) {
				this.sels = sels;
			},
			propertySelsChange: function(sels) {
				this.pSel = sels;
			},
			// handleCurrentChange(val) {
			//   this.page = val;
			//   this.getList();
			// },
			//获取车辆列表
			getList() {
				let para = {
					page: this.currentPage,
					rows: this.size,
				};
				// console.log(para);
				this.listLoading = true;
				list(para).then((res) => {
					// console.log(res);         
					this.rows = res.obj;
					this.totals = Number(res.total);
					// console.log(this.total);
					this.listLoading = false;
				});
			},
			getBrandList() {
				let that = this;

				let params = {

				}
				brandList(params).then((res) => {
					that.brandList = res.obj;
				});
			},
			getPraList() {
				let para = {
					page: this.propertyPage.currentPage,
					rows: this.propertyPage.size,
					type:this.selectType,
				};
				// console.log(para);
				this.propertyPage.listLoading = true;
				paralist(para).then((res) => {
					// console.log(res);         
					this.propertyRow = res.obj;
					this.propertyPage.totals = Number(res.total);
					// console.log(this.total);
					this.propertyPage.listLoading = false;
				});
			},
			getGoodTypeList() {
				let that = this;

				let params = {

				}

				goodsTypeList(params).then((res) => {
					that.typeList = res.obj;
				});
			},
			//显示录入界面
			handleAdd: function() {
				this.addFormVisible = true;
				this.uploadForm.id = "model";
				this.nowType = "add";
				let that = this;
				this.dynamicTags = [];
				setTimeout(function() {
					that.editor.getModule("toolbar").addHandler("image", that.imgHandler);
				}, 1000)
			},
			//录入
			addSubmit: function() {
				let that = this;
				this.$refs.addForm.validate((valid) => {
					if(valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							let para = Object.assign({}, this.addForm);
							debugger;
							para.modelTag = that.dynamicTags.join(";")
							if(para.brand != "") {
								let brand = para.brand.split(";");
								para.brandId = brand[0];
								para.brandName = brand[1];
							}

							if(para.type != "") {
								let type = para.type.split(";");
								para.catId = type[0];
								para.catName = type[1];
							}
							debugger;
							para.modelPara = that.selectProperty;
							para.modelAttr = that.selectSpec;

							save(para).then((res) => {
								// console.log(res);
								// this.rows = res.rows;
								// this.total = Number(res.total);
								// this.getList();
								this.addLoading = false;
								// this.$notify({
								//   title: '成功',
								//   message: '提交成功',
								//   type: 'success'
								// });
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.getList();
							});
						});
					}
				});
			},
			//显示编辑界面
			handleEdit: function(index, row) {
				// console.log(scope);
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
				this.editForm.brand = this.editForm.brandId + ';' + this.editForm.brandName;
				this.editForm.type = this.editForm.catId + ';' + this.editForm.catName;
				this.nowType = "edit";
				this.uploadForm.id = "model";
				this.selectProperty=this.editForm.modelAttr;
				this.selectSpec=this.editForm.modelPara;
				this.selectPropertyName="";
				this.selectSpecName="";
				if(this.editForm.modelTag)
					this.dynamicTags = this.editForm.modelTag.split(";");
				let that = this;
				setTimeout(function() {
					that.editor.getModule("toolbar").addHandler("image", that.imgHandler);
				}, 1000)
			},
			//显示查看界面
			handleView: function(index, row) {
				this.viewFormVisible = true;
				this.viewForm = Object.assign({}, row);
			},
			//      编辑
			editSubmit: function() {
				let that = this;
				this.$refs.editForm.validate((valid) => {
					if(valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							let para = Object.assign({}, this.editForm);
							para.modelTag = that.dynamicTags.join(";")
							if(para.brand != "") {
								let brand = para.brand.split(";");
								para.brandId = brand[0];
								para.brandName = brand[1];
							}

							if(para.type != "") {
								let type = para.type.split(";");
								para.catId = type[0];
								para.catName = type[1];
							}
							debugger;
							para.modelPara = that.selectProperty;
							para.modelAttr = that.selectSpec;
							
							update(para).then((res) => {
								this.editLoading = false;
								// this.$notify({
								//   title: '成功',
								//   message: '提交成功',
								//   type: 'success'
								// });
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getList();
							});
						});
					}
				});
			},

			//删除
			handleDel: function(index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = {
						id: row.id
					};
					del(para).then((res) => {
						this.listLoading = false;
						// this.$notify({
						//   title: '成功',
						//   message: '删除成功',
						//   type: 'success'
						// });
						this.getList();
					});
				}).catch(() => {

				});
			},
			//批量删除
			batchRemove: function() {
				var ids = this.sels.map(item => item.id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = {
						ids: ids
					};
					batchRemoveCars(para).then((res) => {
						this.listLoading = false;
						// this.$notify({
						//   title: '成功',
						//   message: '删除成功',
						//   type: 'success'
						// });
						this.getList();
					});
				}).catch(() => {

				});
			},
			imgHandler(state) {
				if(state) {
					//button is clicked
					//				  alert("!");
					this.showUpload_add = true;
					debugger;
					this.textIndex = this.editor.getSelection().index;
					//					this.insertEmbed(editor.getSelection().index, 'image', "http://120.77.207.47:8080/upload/model/587ecfcfN78fcbe02 (1).jpg");
				}
			},
			handleRemove(file, fileList) {
				let params = {
					id: file.id,
				}

				delAttachMent(params).then((res) => {

				});
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
		},
		activated: function() {
			this.getList();
			this.getBrandList();
			this.getGoodTypeList();

		},
		mounted: function() {

		},
		computed: {
			editor() {
				if(this.nowType == "add")
					return this.$refs.myTextEditor.quill;
				else
					return this.$refs.myTextEditor2.quill;
			}
		},

	};
</script>
<style scoped>
	.hid {
		margin: 0px;
	}
	
	div {
		display: hidden;
	}
	
	td {
		display: hidden;
	}
	
	.box-tree {
		position: absolute;
		overflow: auto;
		z-index: 100;
		width: 100%;
	}
	
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	
	.el-tag+.el-tag {
		margin-left: 10px;
	}
	
	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}
</style>